<template>
  <el-dialog
    title="头像剪辑"
    :visible="(dialogVisible = true)"
    width="31rem"
    top="2rem"
  >
    <el-upload
      class="avatar-uploader"
      drag
      action
      :show-file-list="false"
      :auto-upload="false"
      :on-change="changeUpload"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div class="el-upload__tip" slot="tip">
        只能上传jpg/png文件，且不超过500kb
      </div>
      <!-- <img v-if="articalInfo.img" :src="$getAssetsPath(articalInfo.img)" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
    </el-upload>
    <div class="cropper-content" style="flex:1">
      <div
        class="show-preview"
        :style="{
          width: previews.w + 'px',
          height: previews.h + 'px',
          overflow: 'hidden',
          margin: '1rem auto',
        }"
      >
        <div :style="previews.div" class="preview">
          <img :src="previews.url" :style="previews.img" />
        </div>
      </div>
      <div class="cropper" style="text-align:center">
        <vueCropper
          ref="cropper"
          :img="option.img"
          :info="option.info"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixedBox="option.fixedBox"
          :centerBox="option.centerBox"
          @realTime="realTime"
        ></vueCropper>
        <div>
          <button @click="finish">上传</button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from "vue-cropper"

export default {
  components: {
    VueCropper,
  },
  data() {
    return {
      previews: {},
      option: {
        img: "", // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 1, // 裁剪生成图片的质量
        outputType: "webp", // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: 128, // 默认生成截图框宽度
        autoCropHeight: 128, // 默认生成截图框高度
        fixedBox: true, // 固定截图框大小 不允许改变
        centerBox: true, // 截图框是否被限制在图片里面
      },
      filename: "",
    }
  },
  methods: {
    handleClose(done) {
      this.articalInfo = {
        img: "",
        id: 0,
        name: "",
        nickname: "",
        desc: "",
        fangxiang: "",
      }
      done()
    },
    changeUpload(file, fileList) {
      this.filename = file.name
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message("上传文件大小不能超过 2MB!")
        return false
      }

      // 上传成功后将图片地址赋值给裁剪框显示图片 静态文件目录
      this.$nextTick(() => {
        this.option.img = URL.createObjectURL(file.raw)
      })
    },
    realTime(data) {
      this.previews = data
    },
    finish() {
      this.$refs.cropper.getCropBlob(async (data) => {
        let frm = new FormData()
        frm.append("avatar", data, this.filename)
        let res = await this.$http.post("/upload", frm)

      })
    },
  },
}
</script>

<style>
.cropper-content .cropper {
  width: 28rem;
  height: 21rem;
}
</style>
